<template>
	<div id="backgrounding">
		<el-container>
			<el-aside width="50%">
				<div class="dialog dialog-shadow">
					<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px"  style="margin-right:50px">
  						<span class="title" style="margin-right:60px">网上书店系统--用户注册</span>
  						<el-form-item label="用户名" prop="username">
    						<el-input v-model.number="registerForm.username"></el-input>
  						</el-form-item>
						<el-form-item label="密码" prop="password">
    						<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
 						 </el-form-item>
  						<el-form-item label="确认密码" prop="checkPassword">
    						<el-input type="password" v-model="registerForm.checkPassword" autocomplete="off"></el-input>
  						</el-form-item>
  						<el-form-item>
    						<el-button type="primary" @click="register('registerForm')">注册</el-button>
    						<el-button @click="resetForm('registerForm')">重置</el-button>
  						</el-form-item>
					</el-form>
				</div>
			</el-aside>
			<el-main>
			</el-main>
		</el-container>
	</div>
</template>

<script>
export default {
  	name: 'Register',
  	data(){
		  	var checkUsername = (rule, value, callback) => {
        		if (!value) 
         	 	return callback(new Error('用户名不能为空'));
				else
					callback();
      		};
      		var validatePass = (rule, value, callback) => {
        		if (value === '') {
         		 callback(new Error('请输入密码'));
        		} 
				else {
          			if (this.registerForm.checkPassword !== '') 
            		this.$refs.registerForm.validateField('checkPassword');
          			callback();
        		}
      		};
      		var validatePass2 = (rule, value, callback) => {
        		if (value === '') {
          			callback(new Error('请再次输入密码'));
        		} 
				else if (value !== this.registerForm.password) {
          			callback(new Error('两次输入密码不一致!'));
        		} 
				else {
          			callback();
        		}
     		 };
		return{
			registerForm: {
	        	username: '',
	        	password: '',
				checkPassword:''
	      	},
			//验证规则绑定
        	rules: {
          		password: [
            		{ validator: validatePass, trigger: 'blur' }
          		],
          		checkPassword: [
            		{ validator: validatePass2, trigger: 'blur' }
          		],
          		username: [
            		{ validator: checkUsername, trigger: 'blur' }
          		]
        	}
		}
  	},
 	methods:{
		register(formName) {
		//验证有效
        	this.$refs[formName].validate((valid) => {
          		if (valid) {
            		this.$axios.post('http://localhost:9090/user/register', {
						uname:this.registerForm.username,
						pwd: this.registerForm.password
						})
					.then(res => {
						console.log(res.data);
						//正常
						if (res.data.code === "200") 
						{
							this.$message({
								message:"注册成功",
								type:'success'
								});
								this.$router.replace({path: '/login'})
						}
						else
						{
							this.$message({
							message:res.data.msg,
							type:'error'
							});
							this.$refs[formName].resetFields();
						}
					})
          			}
						else {
            				this.$message({
								message:"注册失败",
								type:'warning'
							});
							this.$refs[formName].resetFields();
            				return false;
         	}
        });
      },
      resetForm(formName) {
        	this.$refs[formName].resetFields();
      	}
	}
}
</script>

<style scoped>

#backgrounding{
	background: url("../../assets/svg1.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
}
.title {
	  width: 100%;
	  display: block;
	  text-align: center;
	  padding-top: 20px;
	  line-height: 1em;
	  color: #333;
	  font-size: 20px;
	  margin-bottom: 20px;
	  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
	}
	.dialog {
	  width: 480px;
	  height: 300px;
	  border: 1px solid #dadada;
	  border-radius: 10px;
	  top: 60%;
	  left: 50%;
	  margin-top: -340px;
	  margin-left: -225px;
	  position: absolute;
	  background-repeat: repeat;
	}
</style>
